<!--
 * @Descripttion: 报表3期-银行数据
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-28 10:59:02
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-12-29 15:02:50
-->
<template>
  <div class="container mainCon">
    <div class="mainConHeader">
      <div class="mainConHeaderContent"></div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="item in list"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <component v-bind:is="currentTabComponent"></component>
    </div>
  </div>
</template>
<script>
import bankBalance from './bankBalance'
import waterSubsidiary from './waterSubsidiary'
import undertakeSubsidiary from './undertakeSubsidiary'
import matchingProject from './matchingProject'
export default {
  name: 'tobePerfect',
  components: {
    bankBalance,
    waterSubsidiary,
    undertakeSubsidiary,
    matchingProject,
  },
  data() {
    return {
      currentTabComponent: 'bankBalance',
      activeName: '2',
      areaId: '',
      industryId: '',
      status: '',
      investment: '',
      list: [
        {
          children: [],
          id: '2',
          isShow: true,
          label: '银行余额表',
          prop: 'REAL_TOTAL',
        },
        {
          children: [],
          id: '3',
          isShow: true,
          label: '银行专户流水明细',
          prop: 'REAL_ATT_TOTAL',
        },
        {
          children: [],
          id: '4',
          isShow: true,
          label: '银行工资代发明细',
          prop: 'REAL_ATT_TOTAL',
        },
        {
          children: [],
          id: '5',
          isShow: true,
          label: '专户未匹配项目',
          prop: 'REAL_ATT_TOTAL',
        },
      ],
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      if (this.activeName == 2) {
        this.currentTabComponent = bankBalance
      } else if (this.activeName == 3) {
        this.currentTabComponent = waterSubsidiary
      } else if (this.activeName == 4) {
        this.currentTabComponent = undertakeSubsidiary
      } else if (this.activeName == 5) {
        this.currentTabComponent = matchingProject
      }
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 132px;
  padding: 0;
  // font-family: SourceHanSansCN-Medium;
  &Header {
    position: relative;
    &Content {
      position: absolute;
      left: 130px;
      z-index: 100;
      font-size: 12px;
      color: #666666;
    }
  }
  /deep/.el-tabs__nav-wrap {
    // padding: 0 40px;
    .el-tabs__nav-prev {
      width: 40px;
      text-align: center;
      margin-top: 0;
      line-height: 57px;
      //   border-right: 1px solid #f1f1f1;
      box-shadow: 7px 0px 7px -7px #aaaaaa;
    }
    .el-tabs__nav-next {
      width: 40px;
      text-align: center;
      margin-top: 0;
      line-height: 57px;
      box-shadow: -7px 0px 7px -7px #aaaaaa;
    }
    .el-tabs__item {
      &:first-child {
        margin-left: 15px;
      }
      &:last-child {
        margin-right: 15px;
      }
    }
  }
}
.commonTab {
  margin-bottom: 24px;
}
</style>
